<template>
  <div class="overflow-container" ref="container">
    <div class="content" ref="content">
      <!-- 这里是需要判断的内容 -->

      <div class="box">
        <div v-for="item in list">{{ item }}</div>
      </div>
    </div>
    <button v-if="showLeftArrow" @click="scroll('left')" class="l">
      < Left
    </button>
    <button v-if="showLeftArrow" @click="scroll('right')" class="r">
      Right >
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        "这里是需要判断的内容这里是需要判断的内容",
        "这里是需要判断的内容这里是需要判断的内容1",
        "这里是需要判断的内容这里是需要判断的内容2",
        "这里是需要判断的内容这里是需要判断的内容3",
        "这里是需要判断的内容这里是需要判断的内容34",
        "这里是需要判断的内容这里是需要判断的内容345",
      ],
      showLeftArrow: false,
      showRightArrow: false,
    };
  },
  mounted() {
    this.checkOverflow();
  },
  methods: {
    checkOverflow() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      this.showLeftArrow = content.scrollWidth > container.offsetWidth;
    },
    scroll(direction) {
      const container = this.$refs.container;
      if (direction === "left") {
        container.scrollLeft -= 100; // 可以根据需要调整滚动量
      } else {
        container.scrollLeft += 100; // 可以根据需要调整滚动量
      }
      this.checkOverflow(); // 每次滚动后重新检查是否需要箭头
    },
  },
  watch: {
    // 监听内容变化重新检查
    "$slots.default": function () {
      this.$nextTick(this.checkOverflow);
    },
  },
};
</script>

<style scoped>
.overflow-container {
  position: relative;
  overflow: auto;
  /* width: 800px; */
  overflow: hidden;
  white-space: nowrap;
}
.content {
  display: inline-block; /* 让内容在同一行显示 */
}
.box {
  display: flex;
}

.l {
  position: absolute;
  top: 10px;
  left: 0;
}
.r {
  top: 10px;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
